<template>
  <div class="advert">
    <!--        广告位-->
    <div class="oneline">
      <img class="left"
           :src="onelefturl">
      <img class="right"
           :src="onerighturl">
    </div>
    <div class="twoline">
      <img v-for="item in two" :key="item.adTypeValue" :src="item.adAccUrl">
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import { getAdvert } from '@/api/advert';
export default {
  name: "qkAdvert",
  data () {
    return {
      onelefturl:'',
      onerighturl:'',
      two:[],
      adcode:'',
    }
  },
  props: {
    prop: {
      type:Object,
      default(){
        return {
          adCode:'XT_AP1202837735474900993'
        }
      }
    }
  },
  watch:{
    'prop'(e){
      this.getAdvert(e.adCode)
    },
    deep:true
  },
  created(){
    this.getAdvert()
  },
  methods:{
    getAdvert(code = 'XT_AP1202837735474900993'){
      getAdvert(JSON.stringify([code])).then(res=>{
        if(res.data.code == 200){
          console.log(res)
          if(res.data.data[0] != null){
            let data = res.data.data[0];
            this.onelefturl = data.advertMapList.slice(0,1)[0].adAccUrl;
            this.onerighturl = data.advertMapList.slice(1,2)[0].adAccUrl;
            this.two = data.advertMapList.slice(2);
          }else{
            this.$message({
              type: 'warning',
              message: '广告编码错误'
            })
            this.onelefturl ='';
            this.onerighturl='';
            this.two = [
              {adAccUrl:''},
              {adAccUrl:''},
              {adAccUrl:''}
            ]
          }
        }else{

        }
      })
    },
  },
  computed: {
    // ...mapGetters([''])
  }
}
</script>

<style lang="scss" scoped>
.advert {
  margin: 15px 0;
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: column;
  .oneline {
    width: 100%;
    height: 125px;
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    .left {
      width: 66.6%;
      display: block;
      display: inline-block;
      height: auto;
      object-fit: cover;
    }
    .right {
      width: 33.4%;
      display: inline-block;
      height: auto;
      object-fit: cover;
    }
  }
  .twoline {
    width: 100%;
    height: 125px;
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    img {
      display: block;
      display: inline-block;
      height: auto;
      object-fit: cover;
      width: 33.4%;
    }
  }
}
</style>